<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script>
    //1.通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");//实际上获取到的是一个数组类型的对象
    alert(divs.length);
    //对divs中所有的div,让其标签体变为一个字符串aaa
    for(var i = 0; i <divs.length;i++){
        // divs[i].innerHTML = "aaa";
        //将js对象转换为jq对象,直接使用jq对象的html()方法
        $(divs[i]).html();
    }


    //2.通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");//实际上获取到的是一个数组类型的对象
    alert($divs.length);//弹出此数组的长度
    //对divs中所有的div,让其标签体变为一个字符串bbb
    $divs.html("bbb");//不用遍历数组就可以设置每一个数组里的div标签的标签体内容是bbb

    //jq对象转换为js对象的两种方法
    $divs[0].innerHTML = "ddd";//加上了索引就变成了js对象,可以直接调用js对象的innerHTML方法
    $divs.get(1).innerHTML = "eee";//加上了索引就变成了js对象,可以直接调用js对象的innerHTML方法



    /*
    * JQuery对象操作时,更加方便,但是和js的方法是不通用的
    * jq-->js的方法:jq对象[索引] 或者 jq对象.get(索引)
    * js-->jq的方法(常用):$(js对象)
    * */
</script>
</body>
</html>